<template>
  <div class="quillBox" :style="{ height: height + 'px' }">
    <quill-editor
      ref="editor"
      :value="value"
      :maxLength="maxLength"
      :options="options"
      :style="{ height: height - subHeight + 'px' }"
      @input="onChange"
      @change="onEditorChange($event)"
      @click.native="handleEditAblequestion"
      @ready="onEditorReady($event)" />

    <Upload
      style="display: none"
      v-if="upload.api"
      :action="upload.api.reqUrl"
      :accept="upload.accept"
      ref="upload"
      :headers="upload.api.headers"
      :name="upload.api.data.fileName"
      :data="upload.api.data"
      :show-upload-list="false"
      :on-success="onUpload"
      :before-upload="onBeforeUpload" />

    <Spin fix v-show="loading">
      <Icon type="ios-loading" size="20" class="demo-spin-icon-load"></Icon>
      <div>上传中</div>
    </Spin>
    <span v-if="maxLength" class="textNum">{{ textNum }}/{{ maxLength }}</span>
  </div>
</template>

<script>
  // import Quill from 'quill'
  // import { lineHeightStyle, SizeStyle } from './lineHeight.js'
  import { quillEditor, Quill } from 'vue-quill-editor'
  import 'quill/dist/quill.snow.css'
  import mgr from './index.js'
  import toolMgr from '@/biz/base/tool'

  export default {
    components: {
      quillEditor
    },
    props: {
      value: String,
      height: {
        type: Number,
        default: 500
      },
      type: Number | String,
      maxLength: Number | String
    },
    data() {
      let handles = {
        video: () => {
          this.upload = {
            type: 'video',
            accept: 'video/*',
            api: toolMgr.unloadFile()
          }
          this.$nextTick(() => {
            this.$refs.upload.handleClick()
          })
        },
        lineheight: (value) => {
          if (value) {
            this.editor.format('lineHeight', value)
          }
        },
        image: () => {
          this.upload = {
            type: 'image',
            accept: 'image/png, image/jpeg, image/gif',
            api: toolMgr.unloadImage()
          }
          this.$nextTick(() => {
            this.$refs.upload.handleClick()
          })
        }
      }
      return {
        editor: null,
        options: mgr.options(handles, this.type, this.maxLength),
        upload: {},
        loading: false,
        qillInit: true,
        subHeight: 50,
        textNum: 0
      }
    },
    mounted() {
      this.editor = this.$refs.editor.quill
      this.showTip()
      this.editor.root.addEventListener(
        'paste',
        (evt) => {
          if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
            evt.preventDefault()
            ;[].forEach.call(evt.clipboardData.files, (file) => {
              if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                return
              }
              // this.uploadToServer(file, (res) => {
              //   var range = this.quill.getSelection();
              //   if (range) {
              //     //  在当前光标位置插入图片
              //     toolbar.quill.insertEmbed(range.index, 'image', this.$ajax.defaults
              //       .baseURL + res.file.path);
              //     //  将光标移动到图片后面
              //     toolbar.quill.setSelection(range.index + 1);
              //   }
              // });
            })
          }
        },
        false
      )
      this.$emit('getEdit', this.editor)
      this.editor.enable(false)
      this.editor.blur()
      this.$nextTick(() => {
        this.subHeight = this.editor.container.offsetTop
        window.addEventListener(
          'resize',
          () => {
            this.subHeight = this.editor.container.offsetTop
          },
          false
        )
      })
    },
    methods: {
      onEditorReady() {},
      handleEditAblequestion() {
        if (this.qillInit) {
          this.editor.enable(true)
          this.editor.focus()
          this.qillInit = false
        }
      },
      showTip() {
        this.$nextTick(() => {
          const toolBar = document.getElementsByClassName('ql-toolbar')[0]
          const btns = toolBar.querySelectorAll('button')
          const sels = toolBar.querySelectorAll('select')
          btns.forEach(function (item) {
            item.title = mgr.getTitleTip(item.className, item.value)
          })
          sels.forEach(function (item) {
            item.parentNode.title = mgr.getTitleTip(item.classList[0])
          })
        })
      },
      onEditorChange(val) {
        this.$emit('onEditorChange', val)
        this.textNum = val.quill.getLength() - 1
        if (this.textNum > this.maxLength) {
          val.quill.deleteText(this.maxLength, 1)
        }
      },
      onChange(e) {
        this.$emit('input', e)
      },
      onUpload(e) {
        this.loading = false
        if (e.code == '200') {
          const range = this.editor.getSelection()
          const newRange = 0 + (range !== null ? range.index : 0)
          if (this.upload.type == 'image') {
            this.editor.insertEmbed(newRange, 'image', e.data.imageURL)
          } else if (this.upload.type == 'video') {
            this.editor.insertEmbed(newRange, 'video', {
              url: e.data.imageURL,
              controls: 'controls'
            })
          }
          this.editor.setSelection(1 + newRange)
        } else {
          this.$Message.error(e.msg)
        }
      },
      onBeforeUpload(e) {
        this.loading = true
        this.upload.api.data.title = e.name
      }
    }
  }
</script>

<style lang="scss">
  .quillBox {
    padding-bottom: 30px;
    position: relative;
    .textNum {
      position: absolute;
      bottom: 0;
      right: 5px;
      color: #ccc;
    }
  }
  .ql-snow .ql-picker.ql-size {
    line-height: normal;
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
    content: '行高';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1']::before,
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
    content: '1';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.5']::before,
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
    content: '1.5';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.75']::before,
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
    content: '1.75';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2']::before,
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
    content: '2';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='3']::before,
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
    content: '3';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='4']::before,
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
    content: '4';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='5']::before,
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
    content: '5';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='6']::before,
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='6']::before {
    content: '6';
  }
  .ql-snow .ql-picker.ql-lineheight {
    width: 70px;
    line-height: normal;
  }

  // font-size.css 需要自己手写的，字号样式对应上vue那边写的字号即可
  .ql-snow .ql-picker.ql-resize .ql-picker-label::before {
    content: '12px';
  }
  .ql-snow .ql-picker.ql-resize {
    width: 70px;
    line-height: normal;
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[ql-picker-options='12px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='12px']::before {
    content: '12px';
  }

  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='14px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='14px']::before {
    content: '14px';
  }

  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='16px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='16px']::before {
    content: '16px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='18px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='18px']::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='20px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='20px']::before {
    content: '20px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='22px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='22px']::before {
    content: '22px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='24px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='24px']::before {
    content: '24px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='26px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='26px']::before {
    content: '26px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='28px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='28px']::before {
    content: '28px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='30px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='30px']::before {
    content: '30px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='32px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='32px']::before {
    content: '32px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='34px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='34px']::before {
    content: '34px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='36px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='36px']::before {
    content: '36px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='38px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='38px']::before {
    content: '38px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='40px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='40px']::before {
    content: '40px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='42px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='42px']::before {
    content: '42px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='44px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='44px']::before {
    content: '44px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='46px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='46px']::before {
    content: '46px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='48px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='48px']::before {
    content: '48px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='50px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='50px']::before {
    content: '50px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='52px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='52px']::before {
    content: '52px';
  }
  .ql-snow .ql-picker.ql-resize .ql-picker-label[data-value='54px']::before,
  .ql-snow .ql-picker.ql-resize .ql-picker-item[data-value='54px']::before {
    content: '54px';
  }
</style>
